<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
<%@page import="map.utils.SpringBeansProvider"%>
<%@page import="map.beans.GitVersionBean"%>
<%@ page session="true" language="java" contentType="text/html; charset-UTF-8"  pageEncoding="UTF-8" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<jsp:useBean id="MapDefaultPropertyValues" class="map.constants.MapDefaultPropertyValues" scope="session"></jsp:useBean>

<%!
	GitVersionBean utils = SpringBeansProvider.getBean("gitVersionBean", GitVersionBean.class);
%>   

<html>        
    <c:url value="images"  			var="images" />
    <c:url value="/help/download"  	var="downloadFileUrl" />  
    <c:url value="proxy/config"  	var="updateProxyConfigUrl" />
    <c:url value="mapengine/config/import"	var="importUrl" />
    <c:url value="mapengine/config/owflib"  var="updateOwfLibUrl" />

<head>		             	  		
	<title>CPCE Map Configuration</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
    <meta http-equiv="encoding"     content="utf-8"></meta>

	<!-- Bootstrap 3.0 CSS -->	   
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/admin/css/bootstrap_cerulean.css"/>'/>
	<!-- JQuery CSS -->
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/admin/css/jquery-ui-1.10.3.css"/>'/>
	<!-- jqGrid CSS -->
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/admin/jqgrid/css/ui.jqgrid.css"/>'/>	
	<!-- Index CSS -->
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/admin/css/stickyFooter.css"/>'/>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/admin/css/emp-main.css"/>'/>
	
	<!-- The actual JQuery code -->	
	<script type='text/javascript' src="js/lib/jquery-1.10.2.min.js"></script> 	
	<!-- The JQuery UI code -->
	<script type='text/javascript' src="js/lib/jquery-ui-1.10.3.custom.min.js"/></script>
	<!-- The JQuery blockUI code -->
	<script type='text/javascript' src="js/lib/jquery.blockUI.js"/></script>
	<!-- The jqGrid language file code -->
	<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-en.js"></script>
	<!-- The actual jqGrid code  -->
	<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
	
	<!-- The Bootstrap  --> 
	<script type='text/javascript' src="js/bootstrap.min.js"></script>   		
      
	<script type="text/javascript">
      	var emp = emp || {};
        emp.$ = jQuery.noConflict();      
    </script>    
    <script type='text/javascript' src='<c:url value="/admin/js/config.manager.js"/>'></script>
	<script type="text/javascript">
		emp.configManager.load({path:"mapengine/config/getMapConfiguration", isSync: false});
	</script>
    <script type='text/javascript' src='<c:url value="/admin/js/importExport.js"/>'></script>   
	
	<script type="text/javascript">
/* 		var loading= emp.$('#loadingDiv').hide();
		$(document)
			.ajaxStart(function() {
				$loading.show();
			})
			.ajaxStop(function() {
				$loading.hide();
			}); */
			
/*  			emp.$(document).on({
				ajaxStart: function() { emp.$('body').addClass("loading");    },
				ajaxStop:  function() { emp.$('body').removeClass("loading"); }
			});  */
	</script>    
              
	<style type="text/css">      	
	    .center .ui-jqgrid { width: 200px; margin-left: auto; margin-right: auto; }	          
	    #pager1 { height: 40px; }
	    #pager1_center { visibility: hidden; }
	    #pager1_right { visibility: hidden; }       	        
	    .wmsAltRow { background-color: #A8D1FF; color: #000;opacity: 0.9 !important;}
	        /*#C1DAD6*/
	    .ui-jqgrid.jqgrow.wmsAltRow { background-color: #A8D1FF: ;color: #000;opacity: 0.9 !important;}       		    
	    .ui-jqgrid tr.jqgrow td { font-size: 0.88em;white-space:normal !important;color:#696969;letter-spacing:0.04em;font-family:Calibri,Tahoma,Monaco,"Courier New"; }        
		.ui-jqgrid .ui-jqgrid-htable th div { white-space:normal !important;height:auto !important; }
	    .ui-jqgrid .ui-jqgrid-view { font-size: 16px; }
		table { border-collapse: separate; border-spacing: 0; }
		tr.jqgrow:hover { background-color: #C1DAD6; cursor: pointer; opacity: 0.8 } 
		tr.ui-state-hover:hover { background-color: #C1DAD6; cursor: pointer; opacity: 0.8 } 
		    
		.navbar-toggle { float: left; color: white; margin-left: 10px; }		    
		.navbar-inverse, .navbar-toggle { border-color: #abcdef; }
		.navbar, .navbar-inverse { border-radius: 0px;-moz-border-readius: 0px;-khtml-border-radius: 0px;-webkit-border-radius: 0px; }
		.save-btn { margin-left: 0px !important; }
		.alert { border-radius: 7px; }
	</style>                
	
	<style type="text/css">
		.modal {
			display: none;
			position: fixed;
			z-index: 2001;
			top: 0;
			left 0;
			height: 100%;
			weight: 100%;
			background: rgba( 255,255,255,.8)
			            url('/admin/images/loading/loading.gif')
			            50% 50%
			            no-repeat;
		}  
		body.loading {
			overflow: hidden;
		}
		body.loading .modal {
			display: block;
		}
		
		.fileInput {
			filter: alpha(opacity=0);
			opacity: 0;
			-moz-opacity: 0;
			-khtml-opacity: 0;
			position: absolute;
			top:  4px;
			left: 0px;
			z-index: 20;
			cursor: pointer;
		}
		
		#fileChoose {
		    opacity: 0;
			filter: alpha(opacity=0);
			-moz-opacity: 0;
			-khtml-opacity: 0;
		    position: absolute;
		    top: 3px;
			left: 3px;
		    width: 150px;
			z-index: 20;
			cursor: pointer;
		}
		
		.manualHover {
		    background-color: #2FA4E7;
		    color: #FFFFFF !important;
		    text-decoration: none;
		}
	</style>

</head>

<body>
	<div id="wrap">
      <nav id="nav-bar" class="navbar navbar-inverse" role="navigation" style="border-radius:0px;">
 			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggleBtn">
					<span class="sr_only"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>				
				<a class="navbar-brand" href="javascript:void(0)" onclick="serverReload();">CPCE</a>
			</div> 
			
			<div id="empNavbar" class="collapse navbar-collapse navbar-inverse-collapse" data-parent="#nav-bar">
				<ul class="nav navbar-nav">
					<li><a id="mapEngines"  href="javascript:void(0)">Map Engines</a></li>
					<li><a id="wmsConfig" href="javascript:void(0)">WMS Servers</a></li>
					<li><a id="mapToolConfig" href="javascript:void(0)">Map Tools</a></li>
					<li><a id="owfConfig" href="javascript:void(0)">Ozone</a></li>				
				</ul>				

				<ul class="nav navbar-nav pull-right" style="margin-top: 5px;">
					<li class="dropdown" >
						<a href="javascript:void(0)" class="dropdown-toggle pull-right" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span></a>
						<ul class="dropdown-menu pull-right">	
				            <li class="nav-header">Data Configurations</li>											
							<li class="divider"></li>								
							<li>
								<a id="export" href="javascript:void(0)" download="map-config.json" onclick="exportConfig()">
									<span class="glyphicon glyphicon-export"></span> Export Data
								</a>
							</li>													
				            <li><a id="43Link" href="javascript:void(0)"><span class="glyphicon glyphicon-import"></span> Import Data</a></li>              
				            <li><div id="43"></div></li>		              
						</ul>
					</li>					
				</ul>																	
			</div>
		</nav>

		<div id="networkConfigContainer" class="container">
			<%-- <div id="proxyConfigContainer">
				<div id="proxySettings" >
					<div class="well" style="min-width:700px; max-width: 700px;">
						<form class="form-horizontal">
							<fieldset>
								<legend class="">Proxy Configuration</legend>

								<div class="form-group">
									<label class="col-lg-2 control-label" for="proxyActive">Enable:</label>
									<div class="col-lg-10"style="left: 175px;padding: 0;position: absolute;top: 155px;">
										<input id="proxyActive" type="checkbox" <%=this.proxyConfig.isProxyActive() ? "checked" : ""%> />
									</div>
								</div>									
								<div class="form-group">
									<label class="col-lg-2 control-label" for="proxyHost" style="top: 0px; float: left;">Proxy Host:</label>
									<div class="col-lg-10" style="float: right; width: 80%;">
										<input id="proxyHost" class="form-control" type="text" placeholder="proxyHost" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-2 control-label" for="proxyPort" style="top: 0px; float: left;">Proxy Port:</label>
									<div class="col-lg-10" style="float: right; width: 80%;">
										<input id="proxyPort" class="form-control" type="text" placeholder="proxyPort" />
									</div>
								</div>								
								<div class="form-group" style="padding-top: 30px;margin-left:0px">
									<button type="button" class="btn btn-success" type="submit" onclick="updateProxyConfig('${updateProxyConfigUrl}')">Save</button>
									<!-- <button type="button" class="btn btn-warning">Reset</button> -->
								</div>
							</fieldset>
						</form>
					</div>
				</div>
			</div> --%>
			<div id="owfConfigContainer">
				<div id="owfSettings">
					<div class="well" style="min-width: 700px; max-width: 700px;">
						<form class="form-horizontal">
							<fieldset>
								<legend>OWF Settings</legend>
								<div class="form-group">
									<label class="col-lg-2 control-label" for="owfLibInput" style="width:187px">OWF Library Location:</label>
									<div class="col-lg-10" style="float: right; width: 475px;">
										<input id="owfLibInput" class="form-control" type="text" placeholder="owfLibLocation" value="${utils.getOwfJsLibLocation()}" />
									</div>
								</div>
								<div class="form-group" style="margin-top: 40px;">
									<div class=" col-lg-2">
										<button id="owfLibLocBtn" class="btn btn-success" type="button" onclick="updateOwfLibLoc()">Save</button>
										<!-- <button type="button" class="btn btn-warning">Reset</button> -->
									</div>
								</div>
							</fieldset>
						</form>
					</div>
				</div>
			</div>
		</div>
				
		<div class="container">
			<div id="wms-div">
				<jsp:include page="wms-server-registration.jsp" />
			</div>
		</div>		
		<div class="container">
			<div id="map-tools-div">
				<jsp:include page="map-tools-config.jsp" />
			</div>
		</div>
		<div class="container">
			<div id="map-engines-div">
				<jsp:include page="mapEngineRegistration.jsp" /> 
			 	<div style="padding:15px;"></div>
				<jsp:include page="default-config.jsp" />
			</div>
		</div>
		
		
<%-- 		<div class="container">
			<div id="settings-div">
			 	<div style="padding:15px;"></div>
				<jsp:include page="data-config.jsp" />
			</div>
		</div> --%>
		
		
		<div id="notification" class="container">
			<div id="success-notification" class="alert alert-success" style="display: none;"> <!-- class="notification-box success" -->
				<p id="success-msg"></p>					
			</div>
				
			<div id="error-notification" class="alert alert-danger" style="display: none;">
				<span>error: </span>	
				<p id="error-msg"></p>						
			</div>
		</div>
				
		<div id="push"></div>
	</div>
	
 	<div id="footer-wrap" class="navbar-inverse"> 		
		<div class="layout-wrap" id="footer">   
			<div id="footer-info">				  
				<div id="footer-blocks" class="navbar-inverse"> 
					<div class="col-md-6">
						 <div id="footer-about-block">
						 	<div class="footer-block-content">
							   <div data-icon="" id="fbi-about" class="footer-block-icon"><span class="glyphicon glyphicon-info-sign"></span></div>						   
								   <div class="ftb-text" style="line-height: 25px;">
										<div class="footer-tiny-title">Version</div>							
										<div class="footerRevInfo">
											<ul class="nav nav-pills nav-stacked">
						        				<li>        			
						        					<span>Branch: <span id="releaseInfo" class="badge footerBadge"><%= utils.getRevision().getBranch() %></span></span>
						        				</li>
						        				<li title="<%= utils.getRevision().getCommitId() %> ">        			
						        					<span>Revision: </span><span id="gitDescribe" class="badge footerBadge"><%= utils.getRevision().getCommitIdAbbrev() %></span>
						        				</li>
						        				<li title="<%= utils.getRevision().getBuildTime() %> ">        			
						        					<span>Date: </span><span id="gitDate" class="badge footerBadge"><%= utils.getRevision().getBuildTime() %></span>
						        				</li>				        				
						        				<li>        			
						        					<span>Version: </span><span id="appVersion" class="badge footerBadge"><%= utils.getVersion() %></span>
						        				</li>
						        			</ul>
						        		</div>
									</div> <!-- fb-text -->
								</div>     
						</div> <!-- footer block -->		
					</div>	
					<div class="clearfix visible-xs"></div>	 
				</div>    
			</div>
		</div>	   		
	</div>
	 
   	
	<!-- The overlay and the box -->
	<div class="container">
	    <div class="overlay" id="overlay" style="display:none;"></div>
	    <div class="box" id="box">
	        <a class="boxclose" id="boxclose"></a>
	        <h1>ERROR: Severe</h1>
	        <img src="images/error.png" />
	        <h3 style="padding: 10px 0px 17px 25px;color:#EF7777;">Properties file not found</h3>
	        <h4 style="padding: 0px 0px 10px 0px;color:#7F7F7F;">To resolve this issue perform the following steps:</h4>
			<div id="error-content">
				<ul  style="list-style-type: decimal;">
				<li> Download <a style="cursor:pointer;color:#0077cc;" onclick="getPropertyFile('${downloadFileUrl}')">${utils.getApplicationPropertyName()}</a> file</li>
					<li>
						<span>Place ${utils.getApplicationPropertyName()} file in the following location:</span>
					<ul style="list-style-type: disc;padding-left: 20px;"><li><span style="font-size: 12px">${PropertyFileManager.getInstance().getConfigPath()}</span></li></ul>							
					</li> 
					<li>Close the browser and reload the page</li>
				</ul>			
			</div>
	     </div>
     </div>      	
	   
    <script type='text/javascript' src='<c:url value="/admin/js/map-config-ui.js"/>'></script>    
	<script type="text/javascript">    	 	
	 	init();	 		 	  
		
/* 		function updateProxyConfigGUI() {	
			var host = "\"" + ${proxyConfig.proxyHost}   + "\"";			
			var port = "\"" + ${proxyConfig.proxyPort}   + "\"";
			var actv = "\"" + ${proxyConfig.proxyActive} + "\"";
			var isActive = actv == "true" ? true : false;
			   
			if (isActive) {
				emp.$('#proxyActive').prop("checked", actv);
				emp.$('#proxyPort').removeAttr( "disable" );
				emp.$('#proxyHost').removeAttr( "disable" );
				emp.$('button').prop('disable', false);				
				emp.$('#buttons').button();
			} else {
				emp.$('#proxyActive').removeProp( "checked" );
				emp.$('#proxyPort').attr( "disable" );
				emp.$('#proxyHost').attr( "disable" );

				emp.$('#buttons').button();
			}		   
			emp.$('#proxyHost').val(host);
			emp.$('#proxyPort').val(port);
		}; */		        

	</script>
	
	<div id="loadingDiv" class="modal"></div>
	  
	<script type="text/javascript">
		createLink($('#43'), $('#43Link'), 'Import Data', '', importUrl, "POST");
	</script>	
</body>
</html>
